import { Button, Space, Typography } from 'antd';
import { 
  MenuOutlined,
  EditOutlined,
  QuestionOutlined,
  UndoOutlined,
  RedoOutlined 
} from '@ant-design/icons';
import { useState } from 'react';

const { Title } = Typography;

export default function TopBar() {
  const [hoveredButton, setHoveredButton] = useState(null);
  const [hoveredRightButton, setHoveredRightButton] = useState(null);

  return (
    <div style={{ 
      display: 'flex', 
      justifyContent: 'space-between', 
      alignItems: 'center',
      padding: '0 16px',
      backgroundColor: '#001529'
    }}>
      {/* 左侧标题 + Undo/Redo */}
      <div style={{ display: 'flex', alignItems: 'center' }}>
        <Title level={4} style={{ color: 'white', margin: 0 }}>
          <MenuOutlined style={{ marginRight: 12 }} />
          Canvas Product
        </Title>
        
        {/* Undo/Redo 按钮组 */}
        <Space size="small" style={{ marginLeft: 48 }}>
          <Button 
            type="text" 
            icon={<UndoOutlined style={{ 
              color: hoveredButton === 'undo' ? '#1890ff' : 'white',
              transition: 'color 0.3s'
            }} />} 
            style={{ color: 'transparent' }}
            title="撤销 (Ctrl+Z)"
            onMouseEnter={() => setHoveredButton('undo')}
            onMouseLeave={() => setHoveredButton(null)}
            onClick={() => console.log('执行撤销')}
          />
          <Button 
            type="text" 
            icon={<RedoOutlined style={{ 
              color: hoveredButton === 'redo' ? '#1890ff' : 'white',
              transition: 'color 0.3s'
            }} />} 
            style={{ color: 'transparent' }}
            title="重做 (Ctrl+Shift+Z)"
            onMouseEnter={() => setHoveredButton('redo')}
            onMouseLeave={() => setHoveredButton(null)}
            onClick={() => console.log('执行重做')}
          />
        </Space>
      </div>

      {/* 右侧功能按钮 */}
      <Space size="middle">
        <Button 
          type="text" 
          icon={<EditOutlined style={{ 
            color: hoveredRightButton === 'edit' ? '#1890ff' : 'white',
            transition: 'color 0.3s'
          }} />} 
          style={{ 
            color: hoveredRightButton === 'edit' ? '#1890ff' : 'white',
            transition: 'color 0.3s'
          }}
          onMouseEnter={() => setHoveredRightButton('edit')}
          onMouseLeave={() => setHoveredRightButton(null)}
        >
          编辑
        </Button>
        <Button 
          type="text" 
          icon={<QuestionOutlined style={{ 
            color: hoveredRightButton === 'help' ? '#1890ff' : 'white',
            transition: 'color 0.3s'
          }} />} 
          style={{ 
            color: hoveredRightButton === 'help' ? '#1890ff' : 'white',
            transition: 'color 0.3s'
          }}
          onMouseEnter={() => setHoveredRightButton('help')}
          onMouseLeave={() => setHoveredRightButton(null)}
        >
          帮助
        </Button>
      </Space>
    </div>
  );
}